<template>
	<view class='task_complate' :animation="taskAnimationData" v-if='show'>
		<!-- <view class='task_name'>{{task.gold}}</view> -->
		<view :animation="coinNumberAnimationData" class='task_name' v-if='task'>{{task.gold}}G</view>
		<image :animation="coinAnimationData" class="coins" src="../../static/img/coins-icon.png" mode=""></image>
		<image :animation="coinAnimationData" class="coins coins2" src="../../static/img/coins-icon.png" mode=""></image>
		<image :animation="coinAnimationData" class="coins coins3" src="../../static/img/coins-icon.png" mode=""></image>
	</view>
</template>

<script>
	function bezier(points, times){
	    // 0、以3个控制点为例，点A,B,C,AB上设置点D,BC上设置点E,DE连线上设置点F,则最终的贝塞尔曲线是点F的坐标轨迹。
	    // 1、计算相邻控制点间距。
	    // 2、根据完成时间,计算每次执行时D在AB方向上移动的距离，E在BC方向上移动的距离。
	    // 3、时间每递增100ms，则D,E在指定方向上发生位移, F在DE上的位移则可通过AD/AB = DF/DE得出。
	    // 4、根据DE的正余弦值和DE的值计算出F的坐标。
	    // 邻控制AB点间距
	    var bezier_points = [];
	    var points_D = [];
	    var points_E = [];
	    const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0]['y'], 2));
	    // 邻控制BC点间距
	    const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2));
	    // D每次在AB方向上移动的距离
	    const EACH_MOVE_AD = -(DIST_AB / times);
	    // E每次在BC方向上移动的距离
	    const EACH_MOVE_BE = -(DIST_BC / times);
	    // 点AB的正切
	    const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
	    // 点BC的正切
	    const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
	    // 点AB的弧度值
	    const RADIUS_AB = Math.atan(TAN_AB);
	    // 点BC的弧度值
	    const RADIUS_BC = Math.atan(TAN_BC);
	    // 每次执行
	    for (var i = 1; i <= times; i++) {
	        // AD的距离
	        var dist_AD = EACH_MOVE_AD * i;
	        // BE的距离
	        var dist_BE = EACH_MOVE_BE * i;
	        // D点的坐标
	        var point_D = {};
	        point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
	        point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
	        points_D.push(point_D);
	        // E点的坐标
	        var point_E = {};
	        point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
	        point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
	        points_E.push(point_E);
	        // 此时线段DE的正切值
	        var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
	        // tan_DE的弧度值
	        var radius_DE = Math.atan(tan_DE);
	        // 地市DE的间距
	        var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2));
	        // 此时DF的距离
	        var dist_DF = (dist_AD / DIST_AB) * dist_DE;
	        // 此时DF点的坐标
	        var point_F = {};
	        point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
	        point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
	        bezier_points.push(point_F);
	    }
	    return {
	        'bezier_points': bezier_points
	    };
	}
	export default {
		data() {
			return {
				coinAnimationData: {},
				taskAnimationData: {},
				coinNumberAnimationData: {},
				coinAnimation: null,
				taskAnimation: null,
				coinNumberAnimation: null,
				windowInfo: {},
				endPoint: {
					x: 0,
					y: 0
				},
				startPoint: {
					x: 0,
					y: 0
				},
				show: false,
				isAnimate: true,
				timer: null,
				halfWW: 0, // 屏幕宽度的一半
			};
		},
		async created () {
			this.coinAnimation = uni.createAnimation({
				timingFunction: 'ease-in',
			})
			
			this.taskAnimation = uni.createAnimation({
				timingFunction: 'ease-in'
			})
			
			this.coinNumberAnimation = uni.createAnimation({
				timingFunction: 'ease-in'
			})
			
			this.startIconAni()
			this.startIconNumberAni()
			try{
				const r = await uni.getSystemInfoSync()
				this.windowInfo = r
				this.halfWW = r.windowWidth / 2
				this.halfWH = r.windowHeight / 2
				this.endPoint.x = (r.windowWidth / 4) / 2
				this.endPoint.y = r.windowHeight - r.windowBottom
				this.startPoint.x = r.windowWidth / 2
				this.startPoint.y = r.windowHeight / 4
			}catch(e){
				console.log('error--------------------',e);
			}
			
			this.startTaskAni()
		},
		computed: {
			task: function () {return this.$store.state.complateTask}
		},
		watch: {
			task (val) {
				this.show = !!val
				if (this.show) {
					setTimeout(() => {
						this.$store.commit('setComplateTask', null)
					}, 1000500)
				}
			}
		},
		methods:{
			startIconNumberAni () {
				this.coinNumberAnimation.scale(0.5).step({duration: 0})
				.scale(1.30).step({duration: 150, timingFunction: 'ease-in'})
				.scale(0.9).step({duration: 150, timingFunction: 'ease-out'})
				.scale(1.31).step({duration: 150, timingFunction: 'ease-in'})
				.scale(0.91).step({duration: 150, timingFunction: 'ease-out'})
				this.coinNumberAnimationData = this.coinNumberAnimation.export()
			},
			startIconAni () {
				this.coinAnimation.scale(0.5).step({duration: 0})
				.scale(1.30).step({duration: 150, timingFunction: 'ease-in'})
				.scale(0.9).step({duration: 150, timingFunction: 'ease-out'})
				.scale(1.31).step({duration: 150, timingFunction: 'ease-in'})
				.scale(0.91).step({duration: 150, timingFunction: 'ease-out'})
				.rotateY(180).step({duration: 400, timingFunction: 'ease-in'})
				.rotateY(-180).step({duration: 400})
				.rotateY(180).step({duration: 400})
				this.coinAnimationData = this.coinAnimation.export()
			},
			startTaskAni () {
				this.taskAnimation.translate(this.endPoint.x, this.endPoint.y).step({
					delay:1200,
					duration:600,
					timingFunction: 'ease-in'
				})
				this.taskAnimationData = this.taskAnimation.export()
				// if(this.isAnimate){
				// 	this.isAnimate=false;
				// 	let index=0;
				// 	clearInterval(this.timer);
				// 	this.timer=setInterval(()=>{
				// 		index++;
				// 		// this.taskAnimation.top((this.halfWH / (225*40) * index * index  - (this.halfWH * this.halfWW + this.halfWW) / (225*40)  * index  + 400)).left(index).step({
				// 		// 	duration:0
				// 		// })
				// 		this.taskAnimationData = this.taskAnimation.export()
				// 		//动画完成
				// 		if(index >= this.windowInfo.windowWidth){
				// 			clearInterval(this.timer);
				// 		}
				// 	},1);
				// }
			}
		}
	}
</script>

<style lang="less">
.task_complate{
	width: 150rpx;
	height: 130rpx;
	position: fixed;
	top: 25%;
	left: 0;
	right: 0;
	margin: auto;
	.coins{
		width: 100rpx;
		height: 100rpx;
		animation: xuanzhuan .4s linear infinite;
	}
	.coins2{
		margin-top: -50rpx;
		margin-left: -50rpx;
	}
	.coins3{
		margin-top: -226px;
		margin-left: 12px;
	}
	.task_name{
		font-size: 40rpx;
		text-align: center;
		color: #1890ff;
	}
}
</style>
